<template>
  <view v-if="visible" class="modal-overlay">
    <view class="content">
      <view class="modal-header">
        <text>{{ title }}</text>
      </view>
      <view class="modal-body">
		  <p class="modal-text">预约时间</p>
		  <view class="input-box" @click="modelshow">{{inputValue}}
		  </view>
		  <p class="modal-text">预约时间段</p>
		  <view class="input-box" @click="periodshow">{{periodValue}}
		  </view>
		  <p class="modal-text">预约说明</p>
		  <!-- <textarea class="input-text"></textarea> -->
		  <div>
		  	<textarea  v-if="!ismodelshow && !ismodelperiod"  rows="4" cols="50" class="reason-all"  v-model="textareaContent"/>
		  </div>
		  </view>
		  <view class="modal-footer">
		  		  <span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">预约</span>
		  </view>
		  <div class="model" v-if="ismodelshow">
		  <span class="modal-date" v-if="ismodelshow">
			  <view class="slider" v-if="showSlider" :style="sliderStyle">
				  <p>请选择日期</p>
				  <datetimepicker  ref="pickerDate" @reset="reset" @confirm="confirm" @show="show" @close="close" :successStartTime="successStartTime" :successEndTime="successEndTime"></datetimepicker>
				  <!-- <span class="model-buttons-footer">
				      <button class="model-buttons1"  @click="closeDate">取消</button>
				      <button class="model-buttons2"  @click="confirmInput">确定</button>
				  </span> -->
			  </view>
		 </span>
        </div>
		<div class="model2" v-if="ismodelperiod">
		  <span class="modal-date" v-if="ismodelperiod">
			  <view class="slider" v-if="showSlider" :style="sliderStyle">
				  <p>请选择时间段</p>
				  <period  ref="pickerDate" @reset="reset" @confirm="confirm" @show="show" @close="close" :successStartTime="successStartTime" :successEndTime="successEndTime"></period>
			  </view>
		 </span>
		</div>
    </view>
  </view>
</template>

<script>
	import period from '@/pages/components/timeperiod/timeperiod.vue'; 
	import datetimepicker from '@/pages/components/datetime/datetime.vue'; 
	
export default {
	components: {
		datetimepicker,
		period
	 },
	 props: {
	     // 接收名为 items 的 prop，类型为数组
	     item: {
	       type: Object,
	       required: true
	     }
	   },
  data() {
    return {
      visible: false,
      title: '预约',
      inputValue: '',
	  selectedValue: '',
	        options: [
	          { value: 'option1', label: '选项1' },
	          { value: 'option2', label: '选项2' },
	          // ...更多选项
	        ],
	  selectedDate: '' ,// 存储选中的日期,
	  ismodelshow:false,//时间
	  successStartTime:'',
	  successEndTime:'',
	  showSlider: false,
	  ismodelperiod:false,//时间段
	  periodValue:'',
	  req:{
		  dtoTS:[],
		  predictTime:''
	  },
	  dtoList:{
		   id: 0,
		   installContent: '',
		   note: 0,
		   predictContent: '',
		   predictNumber: 0,
		   sendRemark: '',
		   threeGuaranteesPrice: 0,
		   threeInstallationCost: 0,
		   threeShippingFee: 0,
		   timeQuantum: '',
		   verificationCode: ''
		  },
	  textareaContent:'',
    };
  },
  mounted(){
	        const now = new Date();
	        // 设置开始时间为当前时间（可以根据需要调整）
	        this.successStartTime = this.formatDate(now);
	        // 设置结束时间为当前时间加上一定的时间间隔（例如1小时），或者保持为当前时间（如果需要）
	        // 这里我们简单地设置为当前时间（同开始时间），但你可以根据需要调整
	        this.successEndTime = this.formatDate(now); // 或者 this.successEndTime = this.addHoursToDate(now, 1);
	      
  },
  methods: {
	  addCilck(){
		  if(!this.inputValue){
			  uni.showToast({
			          title: '请填写预约日期',
			          icon: 'none',
			      });
			  return; // 如果为空，则不执行后续操作
		  }else if(!this.textareaContent){
			  uni.showToast({
			          title: '请填写预约内容',
			          icon: 'none',
			      });
			  return; // 如果为空，则不执行后续操作
		  }
		  //	预约时间
		  this.req.predictTime=this.inputValue;
		  //	业务单id
		  this.dtoList.id=this.item.businessId;
		  //   安装内容
		  this.dtoList.installContent=this.item.installContent;
		  //	预约内容
		  this.dtoList.predictContent=this.textareaContent;
		  //	预约次数
		  this.dtoList.predictNumber=this.item.predictNumber+1;
		  //	派单备注
		  this.dtoList.sendRemark=this.item.installContent;
		  //	三包费用
		  this.dtoList.threeGuaranteesPrice=this.item.sanbaoCost;
		  //	三包安装费
		  this.dtoList.threeInstallationCost=this.item.sanbaoCost;
		   //	三包配送费
		  this.dtoList.threeShippingFee=this.item.threeShippingFee;
		   //	时间段
		  this.dtoList.timeQuantum=this.periodValue;
		  //	核销号
		  this.dtoList.verificationCode=this.periodValue;
		  this.req.dtoTS.push(this.dtoList);
		  // this.$emit('update:data', { currentIndex: this.currentIndex,dtoList: [...this.req]  });
		  this.$emit('update:data', this.req);
		  this.visible = false;
		 //  addAppoint(this.req).then(res =>{
		 //  	this.visible = false;
			// this.$emit('add-item', 1);
		 //  uni.showToast({
		 //  	        title: '预约成功',
		 //  	        icon: 'success',
		 //  	    });
		 //  }).catch((error) => {
		 //      // 请求失败
		 //      console.error('预约失败', error);
		 //      uni.showToast({
		 //          title: '预约失败，请重试',
		 //          icon: 'none',
		 //      });
		 //  });
	  },
	  periodshow(){
		  this.ismodelperiod = true;
		  this.showSlider = true;
	  },
	  show(data){
		  this.ismodelshow = data;
	  },
	  close(data){
		  this.ismodelshow = false;
		  this.ismodelperiod=false;
	  },
	  formatDate(date) {
	    // 根据你的需求格式化日期
	    // 这里是一个简单的例子，将日期格式化为 YYYY-MM-DDTHH:mm:ss
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
	    const day = String(date.getDate()).padStart(2, '0');
	    const hours = String(date.getHours()).padStart(2, '0');
	    const minutes = String(date.getMinutes()).padStart(2, '0');
	    const seconds = String(date.getSeconds()).padStart(2, '0');
	    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
	  			},
	  confirm(data){
		 // 这里是处理从子组件接收到的数据的代码
		 if(data.year==undefined){
			  this.periodValue=data;
			  
		 }else{
			this.inputValue=data.year+'-'+data.month+'-'+data.day; 
		 }
		this.ismodelshow = false;
		this.ismodelperiod=false;
		 
		
	  },
	  closeDate(){
		  this.ismodelshow = false;
	  },
	  closeShow(){
		  this.visible = false;
	  },
	  modelshow(){
		 this.showSlider = true;
		 this.ismodelshow = true;
		  // 移除 <textarea> 的焦点
	  },
	  bindDateChange(e) {
	        this.selectedDate = e.detail.value; // 更新选中的日期
	      },
    showModal(title, callback) {
      this.title = title;
      this.callback = callback;
      this.visible = true;
      // 可以在这里重置 inputValue，如果需要的话
	  this.periodValue='';
	  this.textareaContent='';
      this.inputValue = '';
	  this.dtoList={};
	  this.req.dtoTS=[]
    },
    closeModal() {
      this.visible = false;
      if (this.callback && typeof this.callback.onCancel === 'function') {
        this.callback.onCancel();
      }
    },
    confirmInput() {
      this.visible = false;
      if (this.callback && typeof this.callback.onConfirm === 'function') {
        this.callback.onConfirm(this.inputValue);
      }
    }
  }
};
</script>

<style scoped>
@import "InputModal.css";
</style>